<template>
  <div style="height: 100%;">
    <div class="top"><img :src="info.head_sculpture ? info.head_sculpture : avatar" alt="" width="60"></div>
    <div class="card-list">
      <div class="card info">
        <van-cell-group>
          <van-field v-model="info.name" label="学生姓名" disabled/>
          <van-field v-model="info.birthday" label="生日" disabled/>
          <van-field v-model="info.phone" label="手机号码" disabled/>
        </van-cell-group>
      </div>
      <div class="card course">
        <div class="title">上课记录</div>
        <van-divider/>
        <div class="list">
          <router-link v-for="(item, index) in checks" :key="index" :to="`/student/course?id=${item.kcid}&sid=${info.id}`">
            <div class="item">
              <span>{{ item.kcname }}</span>
              <span v-if="item.time">最近一次签到时间：{{ item.time }}</span>
              <van-divider/>
            </div>
          </router-link>
          <p v-if="checks.length === 0" style="padding: 10px 0;color: #666;">无上课记录</p>
        </div>
      </div>
      <div class="card course">
        <div class="title">费用记录</div>
        <van-cell-group>
          <router-link v-for="(item, index) in pays" :key="index" :to="`/student/cost?id=${item.pid}&sid=${info.id}`">
            <van-cell :value="item.status === 1 ? '已缴清' : '未缴清'" :title="item.pkcname"/>
          </router-link>
          <p v-if="pays.length === 0" style="padding: 10px 0;color: #666;">无缴费记录</p>
        </van-cell-group>
      </div>
    </div>
  </div>
</template>

<script>
import api from '@/api'
// import {birthdayHandle} from '@/utils'
export default {
  name: 'student-detail',
  data () {
    return {
      avatar: require('@/assets/img/icon-avatar.png'),
      info: {
        name: '',
        birthday: '',
        phone: '',
        id: '',
        head_sculpture: ''
      },
      checks: [],
      pays: []
    }
  },
  methods: {
    getInfo () {
      api.platformStudentDetail({
        params: {id: this.$route.query.id},
        callback: res => {
          if (res.data.error_code === 0) {
            Object.keys(this.info).forEach(key => {
              this.info[key] = res.data.data.student[key]
            })
            if (this.info.birthday) {
              this.info.birthday = this.info.birthday.split('-').join('.')
            }
            this.checks = res.data.data.kech
            this.pays = res.data.data.pay
          }
        }
      })
    }
  },
  created () {
    this.getInfo()
  }
}
</script>

<style scoped>
  .top{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 70px;
    padding: 10px;
  }
  .top img{
    border-radius: 50%;
    overflow: hidden;
  }
  .card-list{
    background-color: #F2F2F2;
    padding: 10px;
    min-height: calc(100% - 90px);
    box-sizing: border-box;
  }
  .card-list .card{
    background-color: #fff;
    margin-bottom: 10px;
    border-radius: 6px;
    overflow: hidden;
  }
  .course{
    font-family: PingFangBlod;
    padding: 10px 16px;
  }
  .course .van-cell{
    padding: 10px 0;
  }
  .course .list .item{
    color: #1E1E1E;
  }
  .list .item span:nth-child(2){
    font-size: 11px;
    color: #666;
  }
</style>
